	
<template>
	<view class="container">
		<view class="mine">政治法律</view>
		<view class="swiper">
			<uv-swiper :list="data.list" indicator indicatorMode="line" circular width="686rpx" height="280rpx"></uv-swiper>
		</view>
		<view class="search">
			<uv-row gutter="12">
				<uv-col span="10" style="height: 80rpx;">
					<uv-input class="search_input" placeholder="请输入要查找到的书籍" prefixIcon="../../../static/搜索.png"
						prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</uv-col>
				<uv-col span="2">
					<view style="margin-left: 10rpx;text-align: center;">搜索</view>
				</uv-col>
			</uv-row>
		</view>

		<!-- <uni-section titleFontSize="32rpx" class="mb-10" title="热门推荐"></uni-section> -->
		<view class="image-container">
			<view class="image-item" v-for="xx in data.list" :key="xx">
				<uv-image  radius="8" :src="xx.url" width="116px" height="164px"></uv-image>

				<text class="image-text">{{xx.name}}</text>
			</view>
		</view>
		<uv-divider class="divider"/>
		
	</view>
</template>

<script setup>
	import {reactive,ref} from "vue";
	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			},
			{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '三国演义'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '水浒传'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					name: '西游记'
				},
				{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '三国演义'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '水浒传'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						name: '西游记'
					}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		]
	});
	
	const toVideoDetail = ()=>{
		uni.navigateTo({
			url:'/pages/index/videoDetails/videoDetails'
		})
	}
	const toaudioDetail = ()=>{
		uni.navigateTo({
			url:'/pages/index/audioDetails/audioDetails'
		})
	}
	const toBookDetail = ()=>{
		uni.navigateTo({
			url:'/pages/index/bookDetail/bookDetail'
		})
	}
	const toCategory = ()=>{
		uni.navigateTo({
			url:'/pages/category/category'
		})
	}
</script>

<style>
	.bofang{
		 position: absolute; /* 添加绝对定位 */
		  bottom: 63rpx; /* 距离底部边距 */
		  right: 16rpx; /* 距离右侧边距 */
		  padding: 5px; /* 图标容器内边距，根据需要自行设置 */
	}
	.redio{
		 position: absolute; /* 添加绝对定位 */
		  bottom: 50rpx; /* 距离底部边距 */
		  right: 12rpx; /* 距离右侧边距 */
		  padding: 5px; /* 图标容器内边距，根据需要自行设置 */
		  color: #fcfcfc;
		  font-size: 20rpx;
	}
	.more{
		margin-left: 460rpx;
		margin-top: 27rpx;
		font-size: 26rpx;
		color: #86909C;
	}
	.divider{
		margin-top: 30rpx;
		margin-bottom: 0rpx;
	}
	.icon-container {
	  margin-left: 3px; /* 调整图标与文本之间的间距 */
	  margin-top: 18rpx;
	}
	
	.title{
		display: flex;
		align-items: center;
	}
	.image-container {
		 display: flex;
		  flex-wrap: wrap;
		  width: 100%;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.image-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative; /* 添加相对定位 */
		border-radius: 10rpx;
		margin-bottom: 60rpx;
		margin-right: 2%;
		flex-basis: calc(33.33% - 4%); /* 自适应宽度 */
		/* 		margin-bottom: 5px; */
	}

	.image-text {
		text-align: left;
		margin-top: 8px;
		margin-left: 15rpx;
		font-size: 30rpx;
	}

	.mb-10 {
		margin-top: 30rpx;
		margin-bottom: 16rpx;
	}

	.search_input {}

	.search {
		margin-top: 32rpx;
	}

	.swiper {
		margin-top: 50rpx;
	}

	.container {
		padding: 20px;
		padding-bottom: 300rpx;
		font-size: 20px;
		line-height: 24px;
		font-family: my-font;
	}
</style>